<template>
  <div>
    <div>
      <table id="styled-table">
        <tr>
          <td style="width: 200px">
            <span>{{ dataList.PlanNumber }}</span>
          </td>
          <td>
            <span>{{ form.num }}</span>
          </td>
          <td style="width: 200px">
            <span>{{ dataList.PlanName }}</span>
          </td>
          <td>
            <span>{{ form.name }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>{{ dataList.PlanendDate }}</span>
          </td>
          <td>
            <span>{{ formatTime(form.endDate) }}</span>
          </td>
          <td>
            <span>{{ dataList.Status }}</span>
          </td>
          <td>
            <span>{{ form.statusName }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>{{ dataList.Creator }}</span>
          </td>
          <td>
            <span>{{ form.creatorName }}</span>
          </td>
          <td>
            <span>{{ dataList.CreateTime }}</span>
          </td>
          <td>
            <span>{{ form.createTime }}</span>
          </td>
        </tr>
      </table>
    </div>
    <br />
    <div>
      <table Id="styled-table2">
        <tr>
          <td>
            <span>{{ dataList.DeviceNumber }}</span>
          </td>
          <td>
            <span>{{ dataList.DeviceName }}</span>
          </td>
          <td>
            <span>{{ dataList.DeviceSpecifications }}</span>
          </td>
          <td>
            <span>{{ dataList.DevicePersonResponsibleId }}</span>
          </td>
          <td>
            <span>{{ dataList.Devicedepart }}</span>
          </td>
          <td>
            <span>{{ dataList.MaintenanceTask }}</span>
          </td>
          <td>
            <span>{{ dataList.ScheduledMaintenanceTime }}</span>
          </td>
          <td>
            <span>{{ dataList.Week }}</span>
          </td>
          <td>
            <span>{{ dataList.MaintenancePersonnel }}</span>
          </td>
        </tr>
        <tr
          v-for="(item, index) in form.deviceMaintenanceInfoDtoList"
          :key="index"
        >
          <td v-if="item.rowSpan != 0" :rowspan="item.rowSpan || 1">
            <span>{{ item.deviceNum }}</span>
          </td>
          <td v-if="item.rowSpan != 0" :rowspan="item.rowSpan || 1">
            <span>{{ item.deviceName }}</span>
          </td>
          <td v-if="item.rowSpan != 0" :rowspan="item.rowSpan || 1">
            <span>{{ item.specifications }}</span>
          </td>
          <td v-if="item.rowSpan != 0" :rowspan="item.rowSpan || 1">
            <span>{{ item.personResponsibleName }}</span>
          </td>
          <td v-if="item.rowSpan != 0" :rowspan="item.rowSpan || 1">
            <span>{{ item.departName }}</span>
          </td>
          <td>
            <span>{{ item.project }}</span>
          </td>
          <td>
            <span>{{ formatTime(item.planDate) }}</span>
          </td>
          <td>
            <span>{{ item.cycle + item.unitName }}</span>
          </td>
          <td>
            <span>{{ item.maintenancePersonName }}</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { get } from "../../../api/DeviceMaintenance.js";
import { formatTime } from "../../../utils/time";
export default {
  name: "DeviceMaintenancePlanView",
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formatTime,
      loading: true,
      form: {
        num: "",
        name: "",
        endDate: "",
        statusName: "",
        creatorName: "",
        createTime: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.loading = false;

    this.get();
  },
  methods: {
    get() {
      get({ id: this.id })
        .then((res) => {
          this.form = res.data;
        })
        .catch((res) => {});
    },
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse; /* 合并边框，使其一致 */
  width: 100%;
}
table,
th,
td {
  border: 1px solid gainsboro; /* 设置边框的样式 */
  padding: 8px; /* 可选：设置单元格的内边距 */
}
td {
  text-align: center; /* 水平居中对齐 */
  vertical-align: middle; /* 垂直居中对齐 */
}
#styled-table2 tr:first-child {
  background-color: ghostwhite;
}

#styled-table td:nth-child(1),
#styled-table td:nth-child(3) {
  background-color: ghostwhite;
}
</style>
